<template>
  <view class="userInfoMain">
    <view class="userInfoBox">
      <!-- 头像 昵称 -->
      <view class="userHeaderImg">
        <view>
          <image src="../../static/images/reHead.jpg" mode="widthFix"></image>
        </view>
        <text>{{ userInfo.nick_name }}</text>
      </view>
      <!-- 基本信息 -->
      <view class="baseInfo">
        <view class="title">基本信息</view>
        <u-cell-item
          icon="info-circle"
          title="代理商名称"
          title-width="150"
          :value="userInfo.real_name"
          :value-style="valueStyle"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          icon="phone"
          title="手机号"
          title-width="150"
          :value="userInfo.account"
          :arrow="false"
          :value-style="valueStyle"
        ></u-cell-item>
        <u-cell-item
          icon="account"
          title="身份证号"
          title-width="150"
          :value="
            userInfo.identity_number.replace(
              /^(.{6})(?:\d+)(.{4})$/,
              '\$1******$2'
            )
          "
          :arrow="false"
          :border-bottom="false"
          :value-style="valueStyle"
        ></u-cell-item>
      </view>
      <!-- 结算信息 -->
      <view class="baseInfo">
        <view class="title flex align-center justify-between">
          <text>结算信息</text>
          <view
            class="flex align-center"
            @click="$u.route('/pages/wallet/bankCard')"
            v-if="userInfo.isBindCard == 1"
          >
            变更
            <u-icon
              class="uIcon"
              name="arrow-right"
              color="#ccc"
              size="24"
            ></u-icon>
          </view>
        </view>
        <view v-if="userInfo.isBindCard == 1">
          <u-cell-item
            icon="account"
            title="户名"
            title-width="150"
            :value="bankCardInfo.real_name"
            :value-style="valueStyle"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            icon="rmb-circle"
            title="银行名称"
            title-width="150"
            :value="bankCardInfo.bank_name"
            :arrow="false"
            :value-style="valueStyle"
          ></u-cell-item>
          <u-cell-item
            icon="file-text"
            title="结算卡号"
            title-width="150"
            :value="bankCardInfo.card_number_mask_fmt"
            :arrow="false"
            :border-bottom="false"
            :value-style="valueStyle"
          ></u-cell-item>
        </view>
        <view v-if="userInfo.isBindCard == 0 && isLoad" class="noCard">
          <text>暂无结算卡信息</text>
          <u-button
            type="default"
            :ripple="true"
            shape="square"
            @click="
              $u.route({ url: '/pages/wallet/bindBankCard', type: 'redirect' })
            "
            class="sureBtn"
            >前往认证
          </u-button>
        </view>
      </view>

      <!-- 机器 -->
      <view class="productListListBox">
        <view class="title"><text>产品信息</text></view>
        <u-collapse
          :body-style="bodyStyle"
          :head-style="headStyle"
          v-if="machineInfo.length > 0"
        >
          <u-collapse-item
            :title="item.name"
            :open="false"
            :disabled="false"
            v-for="(item, index) in machineInfo"
            :key="index"
          >
            <view class="collapseItemBox">
              <view class="rateTitle">分润</view>
              <view class="rate">
                <view class="item" v-for="(it, i) in item.feeList" :key="i">
                  <view>{{ it[1] }}</view>
                  <view>{{ it[0] }}</view>
                </view>
              </view>

              <view class="cashBackTitle" v-if="item.tags.length > 0"
                >激活返现</view
              >
              <view class="cashBack" v-if="item.tags.length > 0">
                <view class="item" v-for="(em, j) in item.tags" :key="j">
                  <view>{{ em.active_reward }}</view>
                  <view>激活返现(元)</view>
                </view>
              </view>

              <view class="flowTitle" v-if="item.service_data_fee != ''"
                >流量卡</view
              >
              <view class="flow" v-if="item.service_data_fee != ''">
                <view class="item">
                  <view>{{ item.service_data_fee }}</view>
                  <view>通讯服务费(元)</view>
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
        <view
          class="noMachine flex align-center"
          v-if="machineInfo.length == 0 && isLoad"
        >
          <image
            src="../../static/images/noData/zwsy.png"
            mode="widthFix"
          ></image>
          <text>暂无设置产品</text>
        </view>
      </view>
    </view>
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      valueStyle: {
        "font-size": "28rpx",
        color: "#333",
      },
      headStyle: {
        height: "100rpx",
        "font-size:": "32rpx",
        "font-weight": "bold",
        "border-bottom": "2rpx solid #f1f1f1",
      },
      bodyStyle: {
        height: "auto",
      },
      userInfo: {
        identity_number: "",
      },
      bankCardInfo: {},
      machineInfo: [],
      isLoad: false,
    };
  },
  onLoad() {},
  onShow() {
    this.userInfo = uni.getStorageSync("loginInfo");
    this.getTerminalList(), this.getBankCard();
  },
  methods: {
    // 获取银行卡信息
    getBankCard() {
      this.$u.api
        .myBankCard()
        .then((res) => {
          if (res.status == 200) {
            this.bankCardInfo = res.result;
          }
          this.isLoad = true;
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    //产品列表
    getTerminalList() {
      let userId = uni.getStorageSync("userInfo").id;
      this.$u.api
        .getUserPolicy({
          user_id: userId,
        })
        .then((res) => {
          var datas = res.result;
          if (res.status == 200) {
            this.machineInfo = datas;
            datas.forEach((item) => {
              let tags = item.tags;
              if (tags.length > 0) {
                item.service_data_fee = tags[0].service_data_fee;
              } else {
                item.service_data_fee = "";
              }
            });
          } else {
            this.$u.toast(res.msg);
          }
          this.isLoad = true;
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
}

.userInfoBox {
  padding: 40rpx 30rpx;

  .userHeaderImg {
    view {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      border: 4rpx solid #fff;

      image {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }

    > text {
      display: block;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
    }
  }

  .baseInfo {
    background-color: #fff;
    padding: 30rpx 30rpx 10rpx;
    border-radius: 20rpx;
    margin-bottom: 30rpx;

    .title {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
      padding: 0 10rpx;

      view {
        font-size: 28rpx;
        color: #fb4535;

        .uIcon {
          margin-left: 5rpx;
          position: relative;
          top: 2rpx;
        }
      }
    }

    .u-cell {
      padding-left: 10rpx;
      padding-right: 10rpx;
    }

    .noCard {
      margin-top: 40rpx;
      text-align: center;
      color: #a3a3a3;

      .sureBtn {
        margin: 30rpx 0 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 100rpx;
        background-color: #fb4535;
        color: #fff;

        &::after {
          border: none;
        }
      }
    }
  }

  .productListListBox {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;

    .title {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
      padding: 0 10rpx;
    }

    .collapseItemBox {
      padding: 10rpx 0;
      font-family: numberFont;
      .rate,
      .cashBack,
      .flow {
        display: flex;
        flex-wrap: wrap;
        background-color: #fbedeb;
        padding: 16rpx 0;
      }

      .rateTitle,
      .cashBackTitle,
      .flowTitle {
        background-color: #fb4535;
        height: 60rpx;
        line-height: 60rpx;
        padding-left: 40rpx;
        color: #fff;
      }
      .item {
        margin-top: 20rpx;
        width: 33.33%;
        height: 100rpx;
        text-align: center;
        & view:last-child {
          color: #999;
          font-size: 24rpx;
        }
        & view:first-child {
          padding-bottom: 4rpx;
          color: #000;
          font-size: 32rpx;
        }

        view {
          color: #333;
          font-size: 28rpx;
        }
      }
    }
  }
}

.noMachine {
  padding-top: 60rpx;
  margin-top: 70rpx;
  padding-bottom: 30rpx;
  text-align: center;
  color: #ababab;
  flex-direction: column;

  text {
    margin-top: -40rpx;
  }

  image {
    margin-top: -140rpx;
    width: 320rpx;
  }
}
</style>
